<template>
  <div class="goods-item" >
    <div class="left">
      <van-switch v-model="carList.checked" />
      <div>
        <img :src="carList.thumb_path" alt="" class="goodpic" />
      </div>
    </div>
    <div class="right">
      <a href="#">
           {{carList.title}}
      </a>
      <div class="bottom">
      <span class="price">
           ￥{{carList.sell_price}}
       </span>
       <van-stepper v-model="carList.num" class="hmstepper"/>
      <van-button type="default" class="delete"  @click='del(carList.id)'>删除</van-button> 

      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    carList:{
      type:Object,
      required:true
    }
  },
  methods: {
  del(id){
    this.$emit('delId',id)
  }
       
    }
  
};
</script>

<style lang="less" scoped>
.goods-item {
  display: flex;
  padding: 10px;
  height: 100px;
  border-bottom: 1px solid #ccc;
.right{
    a{
        color: #26a2ff;
    }
}
  .left {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    .goodpic {
      width: 80px;
      height: 60px;
    }
  }
  .right {
    flex: 2;
    .bottom{
        display: flex;
        align-items: center;
        margin-top: 15px;
        /deep/.delete{
           height: 30px;
           padding: 0 5px;
           margin-left: 5px;
           
        }
        .price{
               font-size: 18px;
               color: red;
               margin-right:1px ;
           }
          
    }
  }
}
</style>